<template>
    <!-- 出缸核算 -->
    <div class="main-container" id="main-container">
        <div style="background: #fff; height: 100%" id="workshopCancelStocks">
            <pageTabelLayout>
                <template #pageHeader>
                    <div class="my-header" style="padding: 10px;box-sizing: border-box;" v-if="headerShow">
                        <a-form size="small" :model="searchDataFirst" auto-label-width v-if="handlerState === 1"
                            layout="inline">
                            <a-form-item label-col-flex="80px" :style="{width:'320px'}" label="流转卡号">
                                <a-input class="bacClass"  />
                            </a-form-item>
                            <a-form-item label-col-flex="80px" :style="{width:'320px'}" label="工序">
                                <a-input class="bacClass"  />
                            </a-form-item>
                            <a-form-item label-col-flex="80px" :style="{width:'320px'}" label="班次">
                                <a-input class="bacClass"  />
                            </a-form-item>
                            <a-form-item label-col-flex="80px" :style="{width:'320px'}" label="班组">
                                <a-input class="bacClass"  />
                            </a-form-item>
                            <a-form-item label-col-flex="80px" :style="{width:'320px'}" label="开卡日期">
                                <a-range-picker  popup-container="html"  class="bacClass"  clear />
                            </a-form-item>
                            <a-form-item label-col-flex="80px" :style="{width:'320px'}" label="车间">
                                <a-input class="bacClass"  />
                            </a-form-item>
                            <a-form-item label-col-flex="80px" :style="{width:'320px'}" label="客户名称">
                                <a-input class="bacClass"  />
                            </a-form-item>
                            <a-form-item label-col-flex="80px" :style="{width:'320px'}" label="工号">
                                <a-input class="bacClass"  />
                            </a-form-item>
                            <a-form-item label-col-flex="80px" :style="{width:'320px'}" label="姓名">
                                <a-input class="bacClass"  />
                            </a-form-item>
                            <a-form-item label-col-flex="80px" :style="{width:'320px'}" label="筛选">
                                <a-select popup-container="html"  allow-clear  class="bacClass">
                                    <a-option value="全部">全部</a-option>
                                    <a-option value="开始">开始</a-option>
                                    <a-option value="结束">结束</a-option>
                                </a-select>
                            </a-form-item>
                            <a-form-item label-col-flex="80px" :style="{width:'320px'}" label="审核">
                                <a-select popup-container="html"  allow-clear  class="bacClass">
                                    <a-option value="全部">全部</a-option>
                                    <a-option value="已审核">已审核</a-option>
                                    <a-option value="未审核">未审核</a-option>
                                </a-select>
                            </a-form-item>
                        </a-form>
                        <a-form size="small" :model="searchDataSecond" auto-label-width v-else layout="inline">
                            <a-form-item label-col-flex="80px" :style="{width:'320px'}" label="部门编号">
                                <a-input class="bacClass"  />
                            </a-form-item>
                            <a-form-item label-col-flex="80px" :style="{width:'320px'}" label="部门名称">
                                <a-input class="bacClass"  />
                            </a-form-item>
                            <a-form-item label-col-flex="80px" :style="{width:'320px'}" label="流转卡号">
                                <a-input class="bacClass"  />
                            </a-form-item>
                            <a-form-item label-col-flex="80px" :style="{width:'320px'}" label="布号">
                                <a-input class="bacClass"  />
                            </a-form-item>
                            <a-form-item label-col-flex="80px" :style="{width:'320px'}" label="设备编号">
                                <a-input class="bacClass"  />
                            </a-form-item>
                            <a-form-item label-col-flex="80px" :style="{width:'320px'}" label="当班日期">
                                <a-range-picker  popup-container="html"  class="bacClass"  clear />
                            </a-form-item>
                            <a-form-item label-col-flex="80px" :style="{width:'320px'}" label="回修原因">
                                <a-input class="bacClass"  />
                            </a-form-item>
                            <a-form-item label-col-flex="80px" :style="{width:'320px'}" label="生产车间">
                                <a-input class="bacClass"  />
                            </a-form-item>
                            <a-form-item label-col-flex="80px" :style="{width:'320px'}" label="品名">
                                <a-input class="bacClass"  />
                            </a-form-item>
                            <a-form-item label-col-flex="80px" :style="{width:'320px'}" label="退货部门">
                                <a-input class="bacClass"  clear />
                            </a-form-item>
                        </a-form>
                    </div>
                    <div class="my-divisders">
                        <a-divider orientation="center">
                            <icon-double-up v-if="headerShow" @click="changHeadShow(false)" :strokeWidth="2" :size="18" />
                            <icon-double-down v-else @click="changHeadShow(true)" :strokeWidth="2" :size="18" />
                        </a-divider>
                    </div>
                    <div class="my-tool-bar" style="padding-bottom: 10px;">
                        <Toolbar v-if="handlerState === 1" :items="['查询', '产量扫描', '导出']" @select="selectHandler"
                            @clsm="pageData.showProdct = true" @export="exportHandler" />
                        <Toolbar v-else :items="['查询', '打印统计', '打印明细', '导出']" @select="selectHandler"
                            @printTJ="vPrintStatus = true" @printMX="vPrintStatus = true" @export="exportHandler" />
                    </div>
                </template>
                <template #pageTabel>
                    <a-tabs   :lazy-load="true" @change="changHandler" justify>
                        <a-tab-pane title="出缸信息" key="1">
                                <CylinderDisInfo :searchData="searchDataFirst" />
                        </a-tab-pane>
                        <a-tab-pane title="出缸回修明细" key="2">
                                <cylinderRepairInfo :searchData="searchDataSecond" />
                        </a-tab-pane>
                    </a-tabs>
                </template>
            </pageTabelLayout>
            <a-drawer :drawer-style="{ zIndex: 9999 }" height="100%" unmountOnClose :visible="pageData.showProdct"
                :mask-closable="false" placement="bottom" @cancel="pageData.showProdct = false">
                <template #title>产量扫描</template>
                <div>
                    <div style="display: flex; justify-content:center;margin-bottom: 20px;align-items: center;">
                        <div style="font-weight: bold;margin-right: 10px;white-space: nowrap;">扫描流转卡号:</div>
                        <!-- <a-input style="width: 500px;" /> -->
                        <a-input class="bacClass" style="width:500px" />
                    </div>
                    <a-form size="small" :model="saveDate" auto-label-width layout="inline">
                        <a-form-item label-col-flex="80px" label="部门编号">
                            <a-select popup-container="html"  allow-clear style="width: 270px;" class="bacClass">
                                <a-option value="全部">全部</a-option>
                                <a-option value="开始">开始</a-option>
                                <a-option value="结束">结束</a-option>
                            </a-select>
                        </a-form-item>
                        <a-form-item label-col-flex="80px" label="部门名称">
                            <a-select popup-container="html"  allow-clear style="width: 270px;" class="bacClass">
                                <a-option value="全部">全部</a-option>
                                <a-option value="开始">开始</a-option>
                                <a-option value="结束">结束</a-option>
                            </a-select>
                        </a-form-item>
                        <a-form-item label-col-flex="80px" label="当前日期">
                            <a-select popup-container="html"  allow-clear style="width: 270px;" class="bacClass">
                                <a-option value="全部">全部</a-option>
                                <a-option value="开始">开始</a-option>
                                <a-option value="结束">结束</a-option>
                            </a-select>
                        </a-form-item>
                        <a-form-item label-col-flex="80px" label="班次">
                            <a-select popup-container="html"  allow-clear style="width: 298px;" class="bacClass">
                                <a-option value="全部">全部</a-option>
                                <a-option value="开始">开始</a-option>
                                <a-option value="结束">结束</a-option>
                            </a-select>
                        </a-form-item>
                        <a-form-item label-col-flex="80px" label="班组">
                            <a-select popup-container="html"  allow-clear style="width: 298px;" class="bacClass">
                                <a-option value="全部">全部</a-option>
                                <a-option value="开始">开始</a-option>
                                <a-option value="结束">结束</a-option>
                            </a-select>
                        </a-form-item>
                        <a-form-item label-col-flex="80px" label="生产车间">
                            <a-input class="bacClass" style="width:270px" allow-clear />
                        </a-form-item>
                        <a-form-item label-col-flex="80px" label="员工工号">
                            <a-select popup-container="html"  allow-clear style="width: 270px;" class="bacClass">
                                <a-option value="全部">全部</a-option>
                                <a-option value="开始">开始</a-option>
                                <a-option value="结束">结束</a-option>
                            </a-select>
                        </a-form-item>
                        <a-form-item label-col-flex="80px" label="员工姓名">
                            <a-select popup-container="html"  allow-clear style="width: 270px;" class="bacClass">
                                <a-option value="全部">全部</a-option>
                                <a-option value="开始">开始</a-option>
                                <a-option value="结束">结束</a-option>
                            </a-select>
                        </a-form-item>
                        <a-form-item label-col-flex="80px" label="对色师傅">
                            <a-select popup-container="html"  allow-clear style="width: 270px;" class="bacClass">
                                <a-option value="全部">全部</a-option>
                                <a-option value="开始">开始</a-option>
                                <a-option value="结束">结束</a-option>
                            </a-select>
                        </a-form-item>
                    </a-form>
                </div>
                <template #footer>
                    <a-button @click="pageData.showProdct = false">
                        关闭
                    </a-button>
                    <a-button type="primary" @click="saveHandler">
                        保存
                    </a-button>
                </template>
            </a-drawer>
            <a-modal v-model:visible="vPrintStatus" title="打印预览" :width="1200">
                <div id="printCont">
                    <a-row justify="space-between" align="center" style="margin-bottom: 20px;">
                        <div style="width: 200px;white-space: nowrap;">车间:B车间</div>
                        <div>
                            <h3 style="font-weight: bold;font-size: 20px;">染缸回修明细表</h3>
                        </div>
                        <div style="width: 200px;white-space: nowrap;text-align: right;">日期: 11-02到11-23</div>
                    </a-row>
                    <table class="mytable">
                        <thead>
                            <tr>
                                <th>流转卡号</th>
                                <th>机号</th>
                                <th>重量</th>
                                <th>匹数</th>
                                <th>布号</th>
                                <th>布类</th>
                                <th>颜色</th>
                                <th>责任部门</th>
                                <th>退单部门</th>
                                <th>回修原因</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>XB00105-1</td>
                                <td>BE25</td>
                                <td>1122.7</td>
                                <td>50</td>
                                <td>YL-PW178011</td>
                                <td>千禧棉</td>
                                <td>003#牙白</td>
                                <td>染部B</td>
                                <td>批色</td>
                                <td>走色</td>
                            </tr>
                        </tbody>

                    </table>
                </div>
                <template #footer>
                    <a-button @click="vPrintStatus = false">关闭</a-button>
                    <a-button @click="vPrintClick" style="margin-left: 20px;" type="primary">打印</a-button>
                </template>
            </a-modal>

        </div>
    </div>
</template>  

<script  lang="ts">
import CylinderDisInfo from '@/components/DyeingshopManagement/cylinderCalculate/cylinderDisInfo.vue';
import emitter from '@/hooks/useEventBus'
import { ref, reactive, onMounted } from 'vue';
import printJS from 'print-js'
import { selectDataFn } from '@/api/DyeingshopManagement/getOrderFn';
export default {
    name: "cylinderCalculate",
    setup() {
        let selectDataFnApi = selectDataFn();
        let vPrintStatus = ref<boolean>(false);
        let headerShow = ref<boolean>(true);
        let changHeadShow = (boolVal: boolean) => {
            headerShow.value = boolVal;
            emitter.emit("window-change");
        };
        let handlerState = ref<number>(1);
        const searchDataFirst = reactive<{
            flowCardCode: string;
            greyCode: string;
            productName: string;
            machineCode: string;
            staffCode: string;
            unit: string;
        }>({
            flowCardCode: '',
            greyCode: '',
            productName: '',
            machineCode: '',
            staffCode: '',
            unit: '',
        });
        const searchDataSecond = reactive<{
            flowCardCode: string;
            greyCode: string;
            productName: string;
            machineCode: string;
            staffCode: string;
            unit: string;
        }>({
            flowCardCode: '',
            greyCode: '',
            productName: '',
            machineCode: '',
            staffCode: '',
            unit: '',
        });;
        const saveDate = ref({});
        const vPrintClick = () => {
            printJS({
                printable: 'printCont',
                type: 'html',
                targetStyles: ['*'],
            })
        }

        const selectHandler = () => {
            if (handlerState.value === 1) {
                emitter.emit('refresh-cylinderDisInfo');
            } else {
                emitter.emit('refresh-cylinderRepairInfo');
            }
        };
        onMounted(() => {
            // 第一个页面需要在刚进入就调用一次  切换tap时也需要调用
            selectHandler();
        });
        const exportHandler = () => {
            if (handlerState.value === 1) {
                emitter.emit('export-cylinderDisInfo');
            } else {
                emitter.emit('export-cylinderRepairInfo');
            }
        };
        const changHandler = (e: number | string) => {
            handlerState.value = +e;
            selectHandler();
        };
        const pageData = reactive<{
            showProdct: boolean,
            showOver: boolean,
        }>({
            showProdct: false,
            showOver: false
        });
        const saveHandler = () => {

        };
        const saveRow = async () => {
            let res = await selectDataFnApi.getOrderDepart();
            console.log(res);
        }
        saveRow();
        return {
            headerShow,
            changHeadShow,
            searchDataFirst,
            selectHandler,
            handlerState,
            changHandler,
            searchDataSecond,
            pageData,
            saveHandler,
            saveDate,
            exportHandler,
            vPrintStatus,
            vPrintClick
        };
    },
    components: { CylinderDisInfo }
}
</script>

<style lang="less" scoped>
.main-container {
    height: 100%;
}

.arco-drawer-title {
    width: inherit;
}

.arco-drawer-body .arco-scrollbar-track-direction-horizontal {
    display: none;
}

.arco-drawer-body .arco-table-container .arco-scrollbar-track-direction-horizontal {
    display: block;
}

:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}

.aInput {
    background: #fff;
    width: 270px;
    border: 1px solid #c9cdd3;
}

.aInputLine {
    border: 1px solid #c9cdd3;
    background: #fff;
}

:deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
}

.mytable {
    width: 100%;

    th,
    td {
        padding: 5px;
        border: 1px solid #e3e3e3;
    }

    th {
        background: rgb(247, 248, 250);
    }
}
:deep(.arco-picker input){
    padding-left: 0 !important;
}
:deep(.arco-picker){
    padding-left: 0 !important;
}
:deep(.arco-picker-separator){
    padding: 0 !important;
}

</style> 